import {Component, Input, OnInit} from '@angular/core';
import Map from 'ol/Map';
import {unByKey} from 'ol/Observable';
import MousePosition from 'ol/control/MousePosition';
import {createStringXY} from 'ol/coordinate';
import {Control} from 'ol/control';
import {UtilComponent} from '../../interface/util-component.interface';
import Overlay from 'ol/Overlay';
import {transform} from 'ol/proj';

declare var $: any;

@Component({
    selector: 'kylin-mouse-position',
    templateUrl: './mouse-position.component.html',
    styleUrls: ['./mouse-position.component.less']
})
export class MousePositionComponent implements OnInit, UtilComponent {

    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    currentControl: Control;
    fractionDigits = 4;
    coordinateFormat: any;

    coordOverlay: any;
    coordEle: any;
    mouseMoveListener: any;

    constructor() {
    }

    ngOnInit() {

    }

    addCoordShow() {
        if (this.coordEle) {
            this.coordEle.parentNode.removeChild(this.coordEle);
        }
        this.coordEle = document.createElement('div');
        this.coordEle.className = 'util-mouse-position-tooltip hidden';

        this.coordOverlay = new Overlay({
            element: this.coordEle,
            offset: [15, 0],
            positioning: 'center-left' as any
        });
        this.map.addOverlay(this.coordOverlay);
        this.mouseMoveListener = this.map.on('pointermove', (evt) => {
            this.coordEle.innerHTML = createStringXY(this.fractionDigits)(transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')).split(',');
            this.coordOverlay.setPosition(evt.coordinate);
            this.coordEle.classList.remove('hidden');
        });
    }

    removeCoordShow() {
        if (this.coordEle) {
            this.coordEle.parentNode.removeChild(this.coordEle);
            this.coordEle = null;
        }
        this.map.removeOverlay(this.coordOverlay);
        this.coordOverlay = null;
        unByKey(this.mouseMoveListener);
    }

    turnOn() {
        this.currentControl = new MousePosition({
            coordinateFormat: createStringXY(this.fractionDigits),
            projection: 'EPSG:4326',
            // comment the following two lines to have the mouse position
            // be placed within the map.
            className: 'custom-mouse-position',
            // target: document.getElementById('mouse-position'),
            target: document.getElementById('coordinateFormatShow'),
            undefinedHTML: '&nbsp;'
        });
        this.map.addControl(this.currentControl);
        this.currentControl.on('change', (event) => {
            console.log(event);
        });
        this.addCoordShow();
        $('.content-wrapper').on('input', '.ant-input-number-input', this.resetFractionDigits)
    }

    turnOff() {
        this.map.removeControl(this.currentControl);
        this.removeCoordShow()
    }

    toggle = (options?: any): any => {
        if (options) {
            this.turnOn();
        } else {
            this.turnOff();
        }
    }

    resetFractionDigits = (evt) => {
        const number = evt.target.value;
        if (/^\d+$/.test(number) && +number >= 1 && +number <= 10) {
            this.fractionDigits = number;
            this.currentControl.set('coordinateFormat', createStringXY(this.fractionDigits), false);
        }
    }
}
